<template>
    <div>
        <div class="flex">
            <div class="e-flex-1">
                <div class="container e-m-h-auto e-m-b-15">
                    <div class="flex">
                        <!-- 基本信息 -->
                        <div class="e-flex-1">
                            <div class="details-head">
                                <span class="title e-m-r-15">{{operator.name}} - {{ franchise.name }}</span>
                            </div>
                            <div class="details-body e-m-t-15">
                                <div class="cell">账户管理模式：{{ franchise.paymode}}</div>
                            </div>
                            <div class="e-m-t-20">
                                <el-button type="primary" icon="el-icon-edit" plain @click="dialogVisible = true">编辑信息</el-button>
                            </div>
                        </div>
                        <!-- 充值&提现 -->
                        <div class="recharge-withdrawal-box">
                            <div class="item">
                                <div class="flex align-items-center">
                                    <div class="e-flex-1">
                                        <div class="e-m-b-5">可用余额</div>
                                        <div>
                                            <span class="num">{{ utils.formatMoney(franchise.balance) }}</span><small>元</small>
                                        </div>
                                    </div>
                                    <div class="e-p-l-60">
                                        <!-- <el-button type="primary" class="e-w-120" @click="setRecharge">充值</el-button> -->
                                        <el-button type="" class="e-w-120" @click="checkRecord">查看明细</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="admin-index">
                        <div class="e-p-b-30" style="font-size: 18px;">数据中台</div>
                        <el-radio-group v-model="dataType" class="e-m-b-45" @change="changeType">
                            <el-radio-button label="1">线上回收统计</el-radio-button>
                            <el-radio-button label="2">门店回收统计</el-radio-button>
                            <el-radio-button label="3">小哥入库统计</el-radio-button>
                            <el-radio-button label="4">出库销售统计</el-radio-button>
                        </el-radio-group>
                        <!-- 线上回收统计 -->
                        <div v-if="dataType == 1">
                            <div>
                                <el-form :inline="true" class="demo-form-inline">
                                    <el-form-item label="回收小哥">
                                        <userList v-model="brotherId" :franchiseId="innerFranchiseId" @change="selectUser"></userList>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div>
                                <!-- 线上回收统计 -->
                                <statistics-recycle-online ref="statistics" :franchiseId="innerFranchiseId" :brotherId="brotherId"></statistics-recycle-online>
                            </div>
                        </div>
                        <!-- 门店回收统计 -->
                        <div v-if="dataType == 2">
                            <div>
                                <el-form :inline="true" class="demo-form-inline">
                                    <el-form-item label="站点筛选">
                                        <storeList v-model="listStoreId" @change="selectStore"></storeList>
                                    </el-form-item>
                                    <el-form-item label="站点员工" v-if="listStoreId > 0 && !loading">
                                        <userList v-model="staffId" :franchiseId="innerFranchiseId" :storeId="listStoreId" @change="selectUser"></userList>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div>
                                <!-- 门店回收统计 -->
                                <statistics-recycle-store ref="statistics" :franchiseId="innerFranchiseId" :storeId="listStoreId" :staffId="staffId"></statistics-recycle-store>
                            </div>
                        </div>
                        <!-- 小哥入库统计 -->
                        <div v-if="dataType == 3">
                            <div>
                                <el-form :inline="true" class="demo-form-inline">
                                    <el-form-item label="入库站点">
                                        <storeList v-model="listStoreId" @change="selectStore"></storeList>
                                    </el-form-item>
                                    <el-form-item label="入库小哥" v-if="listStoreId > 0 && !loading">
                                        <userList v-model="brotherId" :franchiseId="innerFranchiseId" @change="selectUser"></userList>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div>
                                 <!-- 小哥入库统计 -->
                                <statistics-recycle-onlinestorage ref="statistics" :franchiseId="innerFranchiseId" :storeId="listStoreId" :brotherId="brotherId"></statistics-recycle-onlinestorage>
                            </div>
                        </div>
                        <!-- 出库销售统计 -->
                        <div v-if="dataType == 4">
                            <statistics-store-sell ref="statistics" :franchiseId="innerFranchiseId"></statistics-store-sell>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    import userList from '@/components/form-select-type/userList.vue'
    import storeList from '@/components/form-select-type/storeList.vue'
    export default {
        layout: 'admin',
        components: {
            userList,
            storeList
        },
        data() {
            return {
                loading: false,
                dataType: 1,
                brotherId: null,
                staffId: null,
                listStoreId: null,
                innerFranchiseId: null,
            }
        },
        mounted() {
            this.innerFranchiseId = localStorage.getItem('franchiseid')
        },
        computed: {
            ...mapState({
                operator: state => state.operator,
                franchise: state => state.franchise
            })
        },
        methods: {
            changeType(){
                this.brotherId = null
                this.staffId = null
            },
            // 选择店员
            selectUser(value){
                this.brotherId = value
                setTimeout(() => {
                    this.$refs.statistics.getList()
                }, 100)
            },
            // 选择站点
            selectStore(value){
                this.loading = true
                this.listStoreId = value
                this.staffId = null
                this.brotherId = null
                setTimeout(() => {
                    this.loading = false
                    this.$refs.statistics.getList()
                }, 100)
            },
            checkRecord(){
                this.$router.push({
                    path: '/franchisee/chargeRecord'
                })
            }
            // 选择小哥
            // selectBrother(value){
            //     this.loading = true
            //     this.listStoreId = value
            //     this.staffId = null
            //     setTimeout(() => {
            //         this.loading = false
            //         this.$refs.statistics.getList()
            //     }, 100)
            // }
        }
    }
</script>

<style lang="scss" scoped>
    .recharge-withdrawal-box{
        // width: 400px;
        background: #e6fbfb;
        border: 1px solid #9aeeef;
        padding: 15px 30px;
        display: flex;
        flex-direction: column;
        color: var(--secondary);
        .item{
            flex: 1;
            display: flex;
            align-items: center;
            border-bottom: 1px dashed var(--border-light);
            padding-bottom: 15px;
            margin-bottom: 15px;
            &:last-child{
                border: 0;
                padding: 0;
                margin: 0;
            }
            .num{
                font-size: 32px;
                font-weight: bold;
                color: var(--orange);
            }
            .text{
                color: var(--dark);
                font-size: 20px;
            }
            .iconfont{
                font-size: 46px;
                margin-right: 15px;
                color: var(--grey);
            }
        }
        .divider{
            border-left: 1px solid var(--border-light);
            height: 40px;
            display: inline-block;
        }
        .flex{
            width: 100%;
        }
    }
    .details-head{
        .title{
            font-size: 20px;
        }
    }
    .details-body{
        display: flex;
        align-items: center;
        color: var(--secondary);
        font-size: 13px;
        .cell{
            margin-right: 10px;
            margin-left: 10px;
            &:first-child{
                margin-left: 0;
            }
        }
    }
</style>